<template>
<div>
<ul id="treefunctionalmodule" class="ztree" style="width:418px; height: 300px;"></ul>
 <input type="hidden" id="module_id">
</div>
</template>
<style  scoped>
 ul.ztree {
    margin-top: 10px;
    border: 1px solid #617775;
    background: #f0f6e4;
    width: 220px;
    height: 360px;
    overflow-y: auto;
    overflow-x: auto;
}
.ztree {
    margin: 0;
    padding: 5px;
    color: #333;
}

  ::-webkit-scrollbar {
            width: 6px;
            /*height: 6px;*/
        }
        /*正常情况下滑块的样式*/
      ::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.05);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在该类指向的控件上时滑块的样式*/
        :hover::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.2);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在滑块上时滑块的样式*/
       ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,.4);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*正常时候的主干部分*/
        ::-webkit-scrollbar-track {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
            background-color: white;
        }
        /*鼠标悬浮在滚动条上的主干部分*/
        ::-webkit-scrollbar-track:hover {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
            background-color: rgba(0,0,0,.01);
        }
/* @import '../../../../static/css/home/bootstrap.min.css';*/
 </style>
 <script>
var settingtow = {
    check: {
        enable: true,
        
    },
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    
    callback: {
     beforeClick: beforeClick,
    
       onCheck: onCheck,
    }
};
function beforeClick(treeId, treeNode){
   // console.log(treeNode);
  // var zTree = $.fn.zTree.getZTreeObj("treefunctionalmodule");
    //zTree.checkNode(treeNode, !treeNode.checked, null, true);
  $("#"+treeNode.tId+"_check").click();
    return false;
};
function onCheck(e, treeId, treeNode){

//treefunctionalmodule_25_check
//tId
//:
//"treefunctionalmodule_25"
    var zTree = $.fn.zTree.getZTreeObj("treefunctionalmodule"),
    che=zTree.checkNode(treeId, true),
    nodes = zTree.getCheckedNodes(true),
    v = "",d="";
    for (var i=0, l=nodes.length; i<l; i++) {
        v += nodes[i].name + ",";
        d += nodes[i].id + ",";
    }
    if (v.length > 0 ) v = v.substring(0, v.length-1);

     if (d.length > 0 ) d = d.substring(0, d.length-1);
    var cityObj = $("#citySel");
    cityObj.attr("value", v);
  // zTree.checkNode(treeNode, true),


    $("#module_id").val(d); $("body").bind("mousedown", onBodyDown);
};
window.hideMenu=function(){
    $("#menuContentmk").fadeOut("fast");
    $("body").unbind("mousedown", onBodyDown);
};

window.onBodyDown=function(){
    if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContentmk" || $(event.target).parents("#menuContentmk").length>0)) {
        hideMenu();
    }
       // if (!(event.target.id == "menuBtn" || event.target.id == "company_name" || event.target.id == "menuContenttow" || $(event.target).parents("#menuContenttow").length>0)) {
       // hideMenutow();
   // }
};
$(document).ready(function(){ 


    console.log(sessionStorage.getItem("coid"));
moduletree();
});
window.moduletree=function(){
  domain.ajaxUrl({
                method: 'POST',
                url: domain.testUrl+"/Threeinjection/index/functionmodule",
                data: {"sessionid":sessionStorage.getItem("sid"),"coid":sessionStorage.getItem("coid")},
                datatype:"JSON",
                success: function (response) {   
                    //   console.log(response);
                   var obj = eval("("+response+")");
               
                    $.fn.zTree.init($("#treefunctionalmodule"), settingtow, JSON.parse(obj.module));
                }
  });
}
 </script>
 